<template>
  <div>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8"><el-input placeholder="输入电影名进行搜索" v-model="query.filmName" clearable>
            <el-button slot="append" icon="el-icon-search" @click="getFilmList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="toAddFilm">添加影片</el-button>
        </el-col>
      </el-row>
      <!-- stripe隔行变色 -->
      <el-table :data="filmList" :border="true" stripe :resizable="false">
        <el-table-column type="index" fixed :resizable="false"></el-table-column>
        <el-table-column label="海报" width="100" prop="filmPicture" fixed>
          <template v-slot="scope">
            <el-upload class="avatar-uploader" :action=uploadAction(scope.row.filmName) :show-file-list="false"
              :before-upload="beforeUpload" :on-success="uploadSucess">

              <img v-if="scope.row.filmPicture" :src="scope.row.filmPicture" class="avatar">
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </template>
        </el-table-column>

        <el-table-column label="电影名" width="200" prop="filmName" fixed :resizable="false"></el-table-column>

        <el-table-column label="类型" width="200" prop="categoryList" :resizable="false">
          <template v-slot="scope">
            <el-tag size="mini" v-for="item in scope.row.categoryList" :key="item.cateNo">{{ item.cateName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="地区" width="100" prop="area.fareaName" :resizable="false"></el-table-column>
        <el-table-column label="导演" width="200" prop="directorList" :resizable="false"></el-table-column>
        <el-table-column label="演员" width="200" prop="actorList" :resizable="false"></el-table-column>
        <el-table-column label="状态" width="70" prop="filmStatus" :resizable="false"></el-table-column>
        <el-table-column label="评论">
          <template v-slot="scope">
            <router-link class="stills" :to="{
              path: '/evaluation',
              query: { id: scope.row.filmId, filmName: scope.row.filmName },
            }">查看评论</router-link>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="270" :resizable="false" fixed="right">
          <template v-slot="scope">
            <el-button type="primary" @click="showDetail(scope.row)">
              <el-icon>
                <Grid />
              </el-icon>详情</el-button>
            <el-button type="primary" @click="editFilm(scope.row.filmId)"><el-icon>
                <Edit />
              </el-icon>编辑</el-button>
            <el-button type="danger" @click="removeFilmById(scope.row.filmId)"><el-icon>
                <Delete />
              </el-icon>删除</el-button>
          </template>
        </el-table-column>
      </el-table>



      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="prev, pager, next, jumper,total,sizes"
        :total="total"
 
      >
      </el-pagination> -->
    </el-card>

    <!-- 影片详情抽屉 -->
    <el-drawer title="影片详情" v-model="drawer" :direction="direction" class="detailForm">
      <el-form label-position="left" label-width="80px" style="height: 800px">
        <el-form-item label-width="0">
          <img :src="filmDetail.filmPicture" style="width: 216px; height: 302px" />
        </el-form-item>
        <el-form-item label="影片名称">
          <span>{{ filmDetail.filmName }}</span>
        </el-form-item>
        <el-form-item label="英文名称">
          <span>{{ filmDetail.filmEnName }}</span>
        </el-form-item>
        <el-form-item label="影片时长">
          <span>{{ filmDetail.filmLength }}分钟</span>
        </el-form-item>
        <el-form-item label="影片状态">
          <span>{{ filmDetail.filmStatus }}</span>
        </el-form-item>
        <el-form-item label="评分">
          <span>{{ filmDetail.filmScore }}</span>
        </el-form-item>
        <el-form-item label="上映时间">
          <span>{{ filmDetail.filmShowTime }}</span>
        </el-form-item>
        <el-form-item label="年代">
          <span>{{ filmDetail.filmAge }}</span>
        </el-form-item>
        <el-form-item label="区域">
          <span>{{ filmDetail.area.fareaName }}</span>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive, nextTick, getCurrentInstance, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
let filmList = ref([])
let addDialogVisible = ref(false)
let addForm = reactive({})
let editDialogVisible = ref(false)
let editForm = reactive()
let total = ref(0)
let drawer = ref(false)
let direction = ref("rtl")
let filmDetail = reactive({
  area: {},
})
let query = reactive({
  filmName: "",
})
let imageUrl = ref("")

function uploadAction(action) {
  return "http://127.0.0.1:9999/common/upload?flag=5&&filmName=" + action

}

onMounted(() => {
  getFilmList();
})

async function getFilmList() {
  const { data: res } = await axios.post(
    "/filminfo/getList",
    query
  );
  console.log(res);
  if (res.code != 200) {
    ElMessage({
      message: res.message,
      type: "error",
    });
  } else {
    var temp = res.data.value;
    temp.forEach((element) => {
      var cateArray = [];
      var actorArray = [];
      var directorArray = [];
      element.categoryList.forEach((element2) => {
        cateArray.push(element2.cateName);
      });
      element.actorList.forEach((element2) => {
        actorArray.push(element2.actorName);
      });
      element.directorList.forEach((element2) => {
        directorArray.push(element2.directorName);
      });
      // element.categoryList = cateArray.join("、")
      element.actorList = actorArray.reverse().join("、");
      element.directorList = directorArray.reverse().join("、");
    });
    console.log(temp);
    // temp.categoryList.cateName
    filmList.value = temp;
  }


}
const beforeUpload = (file) => {

  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    ElMessage.error('只能上传图片文件');
    return false;
  }

}

function uploadSucess(a, b) {
  getFilmList();

}
function showDetail(data) {
  console.log(data);
  drawer.value = true;
  filmDetail = data;
}
function editFilm(id) {
  router.push("/movie/add?id=" + id);
}
</script>
<style lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .avatar {
  width: 80px;
  height: 90px;
  display: block;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 90px;
  text-align: center;
}
</style>